<!--
  * 控制地图-搜索
  *
  * @Author:    骆伟林
  * @Date:      2025-03-24 17:51:27
  * @Copyright  软件需求工程第八组
-->
<template>
  <div class="search-drawer">
    <a-row>
      <a-col :span="20">
        <div style="display: flex; align-items: center">
          <a-input-search v-model:value="search" placeholder="输入搜索全景图地点">
            <template #enterButton>
              <a-button type="primary" @click="handleSearch"> 搜索 </a-button>
            </template>
          </a-input-search>
        </div>
      </a-col>
      <a-col :span="4">
        <a-button @click="resetQuery"> <ReloadOutlined /> </a-button>
      </a-col>
    </a-row>
    <a-list size="small" bordered :data-source="searchList" style="margin-top: 5%; height: 92%; overflow-y: auto" loadMore>
      <template #renderItem="{ item }">
        <a-list-item @click="handleItemClick(item)">
          <a-card :bordered="false" hoverable style="width: 100%">
            <div class="card-content" :title="item.addressName">
              <div class="card-header">
                <span style="margin-right: 5px">{{ item.name || item.addressName }}</span>
              </div>
              <div class="card-footer">
                <span style="font-size: 13px; color: #999; width: 50%; margin-right: 10px">{{ item.creatime }}</span>
              </div>
            </div>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted, computed } from 'vue';
  import { addressApi } from '/@/api/business/address/address-api';

  const emit = defineEmits(['getTarget']);

  let search = ref('');
  let searchList = ref([]);

  async function handleSearch() {
    let parm = {
      pageNum: 1,
      pageSize: 500,
      addressName: search.value,
    };
    const res = await addressApi.queryPage(parm);
    searchList.value = res.data.list;
  }
  async function resetQuery() {
    search.value = '';
    handleSearch();
  }
  onMounted(() => {
    handleSearch();
  });
  function handleItemClick(item) {
    emit('getTarget', item);
  }
</script>

<style scoped>
  .search-drawer {
    padding: 10px;
  }

  .list-item {
    padding: 8px;
    transition: background-color 0.3s ease;
  }

  .list-item:hover {
    background-color: #f0f0f0;
  }
</style>
